<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="blog-posts-events-demo">
      <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
          v-on:enlarge-text="postFontSize += 0.1"
          v-for="post in posts"
          v-bind:key="post.id"
          v-bind:post="post"
        ></blog-post>
      </div>
    </div>
  </body>
</html>
<script src="../../js/vue.js"></script>
<script>
  Vue.component("blog-post", {
    props: ["post"],
    template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
      <button v-on:click="$emit('enlarge-text')">
            点我放大字体
      </button>
    </div>
  `,
  });

  new Vue({
    el: "#blog-posts-events-demo",
    data: {
      posts: [
        { content: "<h5>红楼梦解说</h5>", title: "故事01", id: 1 },
        { content: "<h5>西游记解说</h5>", title: "故事02", id: 2 }
    ],
      postFontSize: 1,
    },
  });
</script>
